<template>
    <div :data-font="$i18n.locale" class="title" :data-required="required">{{ title }}</div>
</template>
    <!-- input 黑色标题 -->
<script>
export default {
    props: {
        required: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        }
    },
}
</script>

<style lang="less" scoped>
.title {
    margin-bottom: 0.11rem;
    font-size: 0.53rem;
    font-weight: normal;
    color: #212121;
    line-height: 0.85rem;
    position: relative;
}

.title[data-font='zh'] {
    font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
}

.title[data-font='en'] {
    font-family: 'Helvetica';
}

.title[data-required=true]::before {
    content: '*';
    font-size: 0.53rem;
    font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #F64F4F;
    line-height: 0.85rem;
    position: absolute;
    left: -0.27rem;
    top: 50%;
    transform: translateY(-50%);
}
</style>